<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制模型</title>
    <script type="text/javascript" src="http://172.29.1.151:8080/libs/Cesium/1.40/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="http://172.29.1.151:8080/libs/Cesium/1.40/Build/Cesium/Widgets/widgets.css"
          type="text/css"/>
    <style>
        html, body, #map3d {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            cursor: default;
        }
    </style>
</head>
<body>
<div id="map3d"></div>
<script>
    var viewer = new Cesium.Viewer('map3d', {
        baseLayerPicker: false,
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
            url: 'http://www.google.cn/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}'
        })
    });

    // 盒子
    viewer.entities.add({
        name: 'Blue box',
        position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000),
        box: {
            dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0), // 长、宽、高
            material: Cesium.Color.BLUE
            // fill : false, // 是否填充
            // outline : true, // 是否显示边框
            // outlineColor : Cesium.Color.BLACK // 边框颜色
        }
    });

    // 圈和椭圆
    viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 150000.0),
        name: 'Green circle at height with outline',
        ellipse: {
            semiMinorAxis: 300000.0, // 短半轴长度
            semiMajorAxis: 300000.0, // 长半轴长度 =========长轴和短轴一样则为圆
            height: 400000.0, // 离地高度
            extrudedHeight: 200000.0, // 拉伸高度 ==== 高度-拉伸高度=立体
            rotation: Cesium.Math.toRadians(45), // 旋转
            material: Cesium.Color.GREEN,
            outline: true // height must be set for outline to display
        }
    });

    // 走廊 entity.corridor
    viewer.entities.add({
        name: 'Red corridor on surface with rounded corners',
        corridor: {
            positions: Cesium.Cartesian3.fromDegreesArray([
                -100.0, 40.0,
                -105.0, 40.0,
                -105.0, 35.0
            ]), // 中心点集
            height: 100000.0,
            extrudedHeight: 50000.0,
            width: 200000.0, // 缓冲带宽 == 走廊宽度
            cornerType: Cesium.CornerType.MITERED, // BEVELED斜角 MITERED直角 ROUNDED圆角
            material: Cesium.Color.RED.withAlpha(0.5),
            outline: true, // height or extrudedHeight must be set for outlines to display
            outlineColor: Cesium.Color.WHITE
        }
    });


    // 气缸和锥体 entity.cylinder
    viewer.entities.add({
        name: 'Green cylinder with black outline',
        position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 200000.0),
        cylinder: {
            length: 400000.0, // 高度
            topRadius: 100000.0, // 顶部的宽度 == 当topRadius和bottomRadius一致的时，就是气缸
            bottomRadius: 200000.0, // 底部的宽度
            material: Cesium.Color.GREEN.withAlpha(0.5),
            outline: true,
            outlineColor: Cesium.Color.DARK_GREEN
        }
    });


    // 多边形 entity.polygon
    viewer.entities.add({
        name: 'Red polygon on surface',
        polygon: {
            // hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
            //     -115.0, 32.0,
            //     -107.0, 33.0,
            //     -102.0, 31.0,
            //     -102.0, 35.0]), // 统一高度
            // extrudedHeight: 500000.0, // 拉伸高度

            hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([-108.0, 25.0, 10,
                -108.1, 25.0, 10,
                -108.1, 30.0, 10,
                -107.9, 28.0, 10,
                -108, 25.0, 10]), // 自定义高度

            extrudedHeight: 0, // 拉伸高度
            perPositionHeight: true,
            closeTop: true, // 多面体顶部是否封闭
            closeBottom: true, // 多面体底部是否封闭
            material: Cesium.Color.RED
        }
    });

    // 挖洞的多边形
    viewer.entities.add({
        name: 'Blue polygon with holes',
        polygon: {
            hierarchy: {
                positions: Cesium.Cartesian3.fromDegreesArray([-99.0, 30.0,
                    -85.0, 30.0,
                    -85.0, 40.0,
                    -99.0, 40.0]),
                holes: [{
                    positions: Cesium.Cartesian3.fromDegreesArray([
                        -97.0, 31.0,
                        -97.0, 39.0,
                        -87.0, 39.0,
                        -87.0, 31.0
                    ]),
                    holes: [{
                        positions: Cesium.Cartesian3.fromDegreesArray([
                            -95.0, 33.0,
                            -89.0, 33.0,
                            -89.0, 37.0,
                            -95.0, 37.0
                        ]),
                        holes: [{
                            positions: Cesium.Cartesian3.fromDegreesArray([
                                -93.0, 34.0,
                                -91.0, 34.0,
                                -91.0, 36.0,
                                -93.0, 36.0
                            ])
                        }]
                    }]
                }]
            },
            material: Cesium.Color.BLUE.withAlpha(0.5),
            height: 0,
            outline: true // height is required for outline to display
        }
    });

    // 折线 entity.polyline
    viewer.entities.add({
        name: 'Red line on the surface',
        polyline: {
            // positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([-75, 35, 10000000, -125, 35, 10000000]),
            width: 10,

            // material: Cesium.Color.RED // 普通样式

            // material : new Cesium.PolylineGlowMaterialProperty({
            //     glowPower : 0.2, // 发光的宽度 为 线的 倍数
            //     color : Cesium.Color.RED
            // }) // 发光样式

            // material : new Cesium.PolylineOutlineMaterialProperty({
            //     color : Cesium.Color.ORANGE,
            //     outlineWidth : 2,
            //     outlineColor : Cesium.Color.RED
            // }) // 线的边框线

            // material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE), // 带箭头
            // followSurface: true //指定是直线还是弧线==浮在表面

            material : new Cesium.PolylineDashMaterialProperty({
                color: Cesium.Color.CYAN, // 线颜色
                gapColor:Cesium.Color.RED, // 分段颜色==默认透明
                dashLength:60 // 分段线的长度 16px

            }) // 分段线
        }
    });


    // 折线卷 entity.polylineVolume

    // 根据圆长计算每个点的位置
    function computeCircle(radius) {
        var positions = [];
        for (var i = 0; i < 360; i++) {
            var radians = Cesium.Math.toRadians(i);
            positions.push(new Cesium.Cartesian2(radius * Math.cos(radians), radius * Math.sin(radians)));
        }
        return positions;
    }

    // 计算星状的位置
    function computeStar(arms, rOuter, rInner) {
        var angle = Math.PI / arms;
        var length = 2 * arms;
        var positions = new Array(length);
        for (var i = 0; i < length; i++) {
            var r = (i % 2) === 0 ? rOuter : rInner;
            positions[i] = new Cesium.Cartesian2(Math.cos(i * angle) * r, Math.sin(i * angle) * r);
        }
        return positions;
    }

    viewer.entities.add({
        name: 'Red tube with rounded corners',
        polylineVolume: {
            positions: Cesium.Cartesian3.fromDegreesArray([-85.0, 32.0,
                -85.0, 36.0,
                -89.0, 36.0]),
            shape: computeCircle(60000.0), // 圆
            material: Cesium.Color.RED
        }
    });
    viewer.entities.add({
        name: 'Green box with beveled corners and outline',
        polylineVolume: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([-90.0, 32.0, 0.0,
                -90.0, 36.0, 100000.0,
                -94.0, 36.0, 0.0]),
            shape: [new Cesium.Cartesian2(-50000, -50000),
                new Cesium.Cartesian2(50000, -50000),
                new Cesium.Cartesian2(50000, 50000),
                new Cesium.Cartesian2(-50000, 50000)], // 矩形
            cornerType: Cesium.CornerType.MITERED,
            material: Cesium.Color.GREEN.withAlpha(0.5),
            outline: true,
            outlineColor: Cesium.Color.BLACK
        }
    });
    viewer.entities.add({
        name: 'Blue star with mitered corners and outline',
        polylineVolume: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([-95.0, 32.0, 0.0,
                -95.0, 36.0, 100000.0,
                -99.0, 36.0, 200000.0]),
            shape: computeStar(7, 70000, 50000), // 星星
            cornerType: Cesium.CornerType.ROUNDED,
            material: Cesium.Color.BLUE
        }
    });

    // 矩形 entity.rectangle
    viewer.entities.add({
      name: 'Red translucent rectangle',
      rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0),
        material: Cesium.Color.RED.withAlpha(0.5),
        rotation: Cesium.Math.toRadians(45), // 旋转
        extrudedHeight: 300000.0, // 拉伸
        height: 100000.0, // 高度
        outline: true,
        outlineColor: Cesium.Color.BLACK
      }
    });

    // 球体和椭球体 entity.ellipsoid
    viewer.entities.add({
        name: 'Blue ellipsoid',
        position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
        ellipsoid: {
            radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0), // 长轴、短轴、高度
            material: Cesium.Color.BLUE,
            outline: true,
            outlineColor: Cesium.Color.BLACK,
            fill: false,
            slicePartitions: 24, // 横切
            stackPartitions: 36 // 竖切
        }
    });

    // 墙壁 entity.wall
    viewer.entities.add({
        name: 'Red wall at height',
        wall: {
            positions: Cesium.Cartesian3.fromDegreesArray([-115.0, 50.0,
                -112.5, 50.0,
                -110.0, 50.0,
                -107.5, 50.0,
                -105.0, 50.0,
                -102.5, 50.0,
                -100.0, 50.0,
                -97.5, 50.0,
                -95.0, 50.0,
                -92.5, 50.0,
                -90.0, 50.0]),
            maximumHeights: [100000, 200000, 100000, 200000, 100000, 200000, 100000, 200000, 100000, 200000, 100000], // 指定用于墙的顶部的高度数组，而不是每个位置的高度。
            minimumHeights: [0, 100000, 0, 100000, 0, 100000, 0, 100000, 0, 100000, 0],// 指定要用于墙的底部而不是地球表面的高度数组。
            material: Cesium.Color.BLUE.withAlpha(0.5),
            outline: true,
            outlineColor: Cesium.Color.BLACK
        }
    });

    // 点 Points
    viewer.entities.add({
        name: 'xuanwuhu',
        position: Cesium.Cartesian3.fromDegrees(-115.0, 30.0),
        point: {
            pixelSize: 10,
            color: Cesium.Color.RED,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 2
        },
        label: {
            text: '啦啦啦啦',
            // 文字样式
            font: '24pt sans-serif',
            style: Cesium.LabelStyle.FILL_AND_OUTLINE, //FILL  FILL_AND_OUTLINE OUTLINE
            fillColor: Cesium.Color.RED,
            // 边框
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 4,
            // 背景
            // showBackground: true,//指定标签后面背景的可见性
            // backgroundColor: new Cesium.Color(0.165, 0.165, 0.165, 0.8), // 背景颜色
            // backgroundPadding: new Cesium.Cartesian2(20, 20),//指定以像素为单位的水平和垂直背景填充padding
            // 尺寸
            scale: 1.0,//指定应用于文本的比例
            // 位置
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // CENTER LEFT RIGHT
            verticalOrigin: Cesium.VerticalOrigin.BASELINE, //BASELINE BOTTOM CENTER TOP
            // 偏移
            // eyeOffset: new Cesium.Cartesian3(100, 100, 100), //指定眼睛偏移的属性
            pixelOffset: new Cesium.Cartesian2(10, 0) //指定像素偏移量的属性
        }
    });

    // 广告牌 Billboards 广告牌可以显示一个图片
    viewer.entities.add({
        name: "广告牌",
        position: Cesium.Cartesian3.fromDegrees(-115.0, 35.0, 0),
        //广告牌
        billboard: {
            image: 'demo.jpg',
            width: 50,
            height: 50,
            // scale: 1.0, //指定应用于图像大小的比例
            // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            // verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            // pixelOffset: new Cesium.Cartesian2(0, 10), // 偏移
            // rotation: 0, // 旋转
            imageSubRegion: new Cesium.BoundingRectangle(25, 25, 50, 50), //(x，y，宽度，高度) 用于广告牌的图像的子区域，而不是整个图像，以像素为单位从左下角开始测量。
            // sizeInMeters: true //指定此广告牌的尺寸是否应以米为单位进行测量
        },
        label: {
            text: 'Citizens Bank Park',
            font: '12pt monospace',
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth: 2,
            verticalOrigin: Cesium.VerticalOrigin.TOP,
            pixelOffset: new Cesium.Cartesian2(0, 30)
        }
    });
    // 标签 Labels

    viewer.zoomTo(viewer.entities);
</script>
</body>
</html>